window.onload=function (){
    //浏览盒子
    let previewImg=document.previewImg=document.querySelector(".preview-img")
    let mask=document.mask=document.querySelector(".mask")
    let big=document.big=document.querySelector(".big")
    //为previewImg绑定鼠标事件
    //将mask和dig显示出来
    previewImg.addEventListener('mouseenter',function () {
        mask.style.display='block'
        big.style.display='block'
    })
    // 将mask和dig隐藏出来
    previewImg.addEventListener('mouseleave',function () {
        mask.style.display='none'
        big.style.display='none'
    })
    //绑定鼠标移动
    previewImg.addEventListener("mousemove",function (e) {
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;
        let previewImgLeft=this.offsetLeft;
        let previewImgTop=this.offsetTop;
        let maskX = mousePageX - previewImgLeft;
        let maskY = mousePageY - previewImgTop;
        //获取盒子的尺寸
        let maskWidth = mask.offsetWidth;
        let maskHeight = mask.offsetHeight;
        // 减去自己宽高的一半
        maskX = maskX - maskWidth/2;
        maskY = maskY- maskHeight/2;
        // 调整盒子的范围，不能越界
        //调整越界的x
        if(maskX < 0){
            maskX = 0;
        }else if(maskX > previewImg.offsetWidth - mask.offsetWidth ){
            maskX = previewImg.offsetWidth - mask.offsetWidth;
        }
        //调整越界的y
        if(maskY < 0){
            maskY = 0;
        }else if(maskY > previewImg.offsetHeight - mask.offsetHeight ){
            maskY = previewImg.offsetHeight - mask.offsetHeight;
        }
        //给mask设置坐标
        mask.style.top=maskY+'px'
        mask.style.left=maskX+'px'
    })
    //功能3：放大图跟随遮罩盒子移动
    let bigImg = big.querySelector("img");
    bigImg.style.left = -maskX*300/100 + 'px'
    bigImg.style.top = -maskY*300/100 + 'px'





}